<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>今日头条APP顶部点击可居中导航</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../static/plus/swiper-3.4.2.min.css">
    <script src="../static/plus/jquery-1.7.2.min.js"></script>
    <script src="../static/plus/swiper-3.4.2.jquery.min.js"></script>
    <style>
        #topNav {
            width: 100%;
            overflow: hidden;
            font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
            border-bottom: 1px solid #f8f8f8;
        }
        #topNav .swiper-slide {
            padding: 0 5px;
            letter-spacing: 2px;
            width: 3rem;
            text-align: center;
        }
        #topNav .swiper-slide span {

            transition: all .3s ease;
            display: block;
        }
        #topNav .active span {
            transform: scale(1.1);
            color: #FF2D2D;
        }
        .en-markup-crop-options {
            top: 18px !important;
            left: 50% !important;
            margin-left: -100px !important;
            width: 200px !important;
            border: 2px rgba(255, 255, 255, .38) solid !important;
            border-radius: 4px !important;
        }
        .en-markup-crop-options div div:first-of-type {
            margin-left: 0px !important;
        }
    </style>
</head>
<body style="">
<div id="topNav" class="swiper-container swiper-container-horizontal swiper-container-free-mode">
    <div class="swiper-wrapper" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
        <div class="swiper-slide swiper-slide-active"><span>推荐</span></div>
        <div class="swiper-slide swiper-slide-next"><span>热点</span></div>
        <div class="swiper-slide"><span>深圳</span></div>
        <div class="swiper-slide"><span>视频</span></div>
        <div class="swiper-slide"><span>社会</span></div>
        <div class="swiper-slide"><span>娱乐</span></div>
        <div class="swiper-slide active"><span>科技</span></div>
        <div class="swiper-slide"><span>问答</span></div>
        <div class="swiper-slide"><span>汽车</span></div>
        <div class="swiper-slide"><span>财经</span></div>
        <div class="swiper-slide"><span>军事</span></div>
        <div class="swiper-slide"><span>体育</span></div>
        <div class="swiper-slide"><span>段子</span></div>
        <div class="swiper-slide"><span>美女</span></div>
        <div class="swiper-slide"><span>国际</span></div>
        <div class="swiper-slide"><span>趣图</span></div>
        <div class="swiper-slide"><span>健康</span></div>
        <div class="swiper-slide"><span>特产</span></div>
        <div class="swiper-slide"><span>房产</span></div>
    </div>
</div>
<script type="text/javascript">
    var mySwiper = new Swiper('#topNav', {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 'auto',
    });
    swiperWidth = mySwiper.container[0].clientWidth
    maxTranslate = mySwiper.maxTranslate();
    maxWidth = -maxTranslate + swiperWidth / 2
    $(".swiper-container").on('touchstart', function (e) {
        e.preventDefault()
    })
    mySwiper.on('tap', function (swiper, e) {
//	e.preventDefault()
        slide = swiper.slides[swiper.clickedIndex]
        slideLeft = slide.offsetLeft
        slideWidth = slide.clientWidth
        slideCenter = slideLeft + slideWidth / 2
        // 被点击slide的中心点
        mySwiper.setWrapperTransition(300)
        if (slideCenter < swiperWidth / 2) {
            mySwiper.setWrapperTranslate(0)
        } else if (slideCenter > maxWidth) {
            mySwiper.setWrapperTranslate(maxTranslate)
        } else {
            nowTlanslate = slideCenter - swiperWidth / 2
            mySwiper.setWrapperTranslate(-nowTlanslate)
        }
        $("#topNav  .active").removeClass('active')
        $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')
    })
</script>

</body>
</html>